<template>
	
		<view class=" whiteBg  shadow   w100p"  >
			<view class="fixAuto h80  pd10"  style="width: 1300px ;margin: 0 auto; ">
				<view class="logo w160">
					<image src='../../static/logo.png' class="w100p h60" alt="logo"></image>
				</view>
				<view >					
					<view class="flex fz16 h100p lt  bigMenu " ref="main">
						<block v-for="(x,index) in list" :key="index" >
							<block v-if="!x.child||x.child.length==0">
								<view class=" w120  hover  tc bold brown" @click="go(x.url)">{{x.name}}
									
								</view>
							</block>
							<block v-if="x.child && x.child.length>0">
								<view class=" w120  hover  tc bold brown " @mouseover="mouseover($event,index)"  @mouseout="onmouseout($event,index)"  style="z-index: 998;">{{x.name}}
									<span class="caret" ></span>
									<ul class="dropdown-menu" :id="'dp'+index" style="display: none;" >
										<li v-for="option in x.child">
											<a href="javascript:void(0)" @click="updateOption(option)">
												{{ option.name }}
											</a>
										</li>
									</ul>
								</view>
								
							</block>
						</block>
						
					</view>
					<!-- <view class="flex fz16 h100p lt  bigMenu">
						<view class=" w120  hover  tc bold brown" @click="go('/pages/web/index')">首页</view>
						<view class=" w120  hover  tc bold brown">新闻</view>
						<view class=" w120  hover  tc bold brown">案例</view>
						<view class=" w120  hover  tc bold brown">关于</view>
					</view> -->
				</view>
			</view>
		</view>
		
		
		
		<!-- <view class="btn-group" ref="main">
			<li @click="toggleMenu()"   class="dropdown-toggle"  @mousedown="updateXY">
				{{ selectedOption.name }}
				<span class="caret"></span>
			</li>
			<li @click="toggleMenu()" class="dropdown-toggle" @mousedown="updateXY" v-if="selectedOption.name !== undefined">
				{{ selectedOption.name }}
				<span class="caret"></span>
			</li>
			<ul class="dropdown-menu" :class="{ 'hide' : !showMenu}">
				<li v-for="option in options">
					<a href="javascript:void(0)" @click="updateOption(option)">
						{{ option.name }}
					</a>
				</li>
			</ul>
		</view> -->
		
	
</template>

<script>
	
	export default {
		name: 'kenynavbar',		
		props: {						
			datalist:{
				type:Array,
				default:()=>[]
			}
		},
		data() {
			return {
				loading: true ,
				list:[],
				// list:[{"name":"首页","url":'/pages/web/index',"child":[]},{"name":"新闻","url":'/web/index',"show":true,"child":[
				// 	{"name":"案例1","url":'/pages/web/list'},
				// 	{"name":"案例2","url":'/web/index'},
				// 	{"name":"案例3","url":'/web/index'},
				// 	{"name":"案例4","url":'/web/index'}
				// ]},{"name":"案例","url":'/web/index',
				// "child":[
				// 	{"name":"案例1","url":'/pages/web/list'},
				// 	{"name":"案例2","url":'/web/index'},
					
				// ]},{"name":"关于","url":'/web/index'}],
				showMenu: true,
				options:[],
				x:0,
				y:0,
				actionUrl:'api/navbar/list'
			}
		},	
		
		created() {
			//console.log("created")
			this.getPage();
		},
		mounted: function(){
		   // document.addEventListener('click', this.hidePanel, false)
			
		},
		methods: {
			getPage:function(e){
				this.bcc.callInCache({
					url : this.actionUrl ,
					success : e => {
						
						let all=e.list;
						let navlist=this.getJsonTree(all,"")
						
						this.list = navlist;
						this.loading = false ;
					}
				});
			},
			go(e){
				uni.navigateTo({
					url: e
				})
			},
			mouseover(event,index){				
				document.getElementById("dp"+index).style.display="";//显示
				
				// document.documentElement.style.setProperty('--mouse-x', event.clientX)
				// document.documentElement.style.setProperty('--mouse-y', event.clientY)
			},
			onmouseout(event,index){
				document.getElementById("dp"+index).style.display="none";//hide
			},
			updateXY:function(event){
				this.x=event.clientX;
				this.y=event.clientY
				document.documentElement.style.setProperty('--mouse-x', event.clientX)
				document.documentElement.style.setProperty('--mouse-y', event.clientY)
				//console.log(this.x,this.y)
			},
			
			updateOption: function(option) {
				//this.selectedOption = option;	
				this.go(option.url)
				this.showMenu = false;
				
			},
			toggleMenu: function(e) {
				this.options=e;
				this.showMenu = !this.showMenu;
				
			},
			closeBtnGroup: function() {
				this.showMenu = false;
			},
			hidePanel: function(e) {
				
				if (!this.$refs.main.contains(e.target)) { //点击除弹出层外的空白区域
					this.showMenu = false;
				}
			},			
			getJsonTree : function(data, parentId) {
			    var itemArr = [];
			    for (var i = 0; i < data.length; i++) {
			        var node = data[i];
			        if (node.parent_id == parentId) {
			            var newNode = {};
			            newNode._id = node._id;
			            newNode.name = node.name;
			            newNode.url = node.url;
			            newNode.icon = node.icon;
			            newNode.child = this.getJsonTree(data, node._id);
			            itemArr.push(newNode);
			        }
			    }
			    return itemArr;
			}
			
		}
	}
</script>

<style>
	.btn-group {
		min-width: 100px;
		height: 80px;
		position: relative;
		margin: 10px 1px;
		display: inline-block;
		vertical-align: middle;
		a {
			&:hover {
				text-decoration: none;
			}
		}
	}

	.dropdown-toggle {
		font-family: PingFangSC-Semibold;
		list-style-type: none;
		color: #000;		
		min-width: 100px;
		float: left;
		padding: 10px;
		text-transform: none;
		font-weight: 300;
		margin-bottom: 7px;
		border: 0;
		border-radius: 0;
		text-align: center;
	}

	.hide {
		display: none;
	}

	.dropdown-menu {
		position:absolute;
		
		/* top: calc(var(--mouse-y) * 1px);
		left:calc(var(--mouse-x) * 1px); */
		z-index: 999;
		min-width: 100px;
		padding: 5px 0;
		margin: 2px 0 0;
		list-style: none;
		font-size: 14px;
		text-align: left;
		background-color: #fff;
		border: 1px solid #ccc;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	}

	.dropdown-menu>li>a {
		padding: 10px 30px;
		display: block;
		clear: both;
		font-weight: normal;
		line-height: 1.6;
		color: #333333;
		white-space: nowrap;
		text-decoration: none;
		&:hover {
			background: #efefef;
			color: #409FCB;
		}
	}

	.dropdown-menu>li {
		overflow: hidden;
		width: 100%;
		position: relative;
		margin: 0
	}

	.caret {
		display: relative;
		width: 0;
		position: relative;
		top: 10px;
		height: 0;
		margin-left: 2px;
		vertical-align: middle;
		border-top: 4px dashed;
		border-top: 4px solid \9;
		border-right: 4px solid transparent;
		border-left: 4px solid transparent;
		/* float: right; */
	}
</style>
